<template>
  <section class="el-container is-vertical" style="height: 100%">
  	<header class="el-header" style="color: #fff; height: 60px; background: #373d41;">
  		<el-row style="line-height: 60px;">
			  <el-col :span="1" >
			  	<div>
			  		<img style="width: 100%;" src="../../../build/logo.png"/>
			  	</div>
			  </el-col>
			  <el-col :span="5":offset="1">
			  	<div style="letter-spacing: 2px;">
			  		<h3>禾火博客後臺管理系統</h3>
			  	</div>
			  </el-col>
			  <el-col :span="2" :offset="15">
			  	<!--<div v-text="userName">
			  	</div>-->
			  	<el-dropdown :hide-on-click="false">
					  <span class="el-dropdown-link glyphicon glyphicon-user" style="color: #67C23A;">
					    {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
					  </span>
					  <el-dropdown-menu slot="dropdown">
					    <el-dropdown-item>个人中心</el-dropdown-item>
					    <el-dropdown-item>修改密码</el-dropdown-item>
					    <el-dropdown-item><p @click='loginOut()'>退出登录</p></el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
			  </el-col>
			</el-row>
  	</header>
  	<section class="el-container">
  		<el-scrollbar style="border: 1px solid #dfdfdf;">
  		<aside class="el-aside">
  			<el-radio-group v-model="isCollapse">
				  <el-button v-show="labelShowChange" class="changeLable" @click="changeLable">展开</el-button>
				  <el-button v-show="labelHideChange" class="changeHideLable" @click="changeLable" style="margin-left:0px;">收起</el-button>
				</el-radio-group>
				<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
				  <el-submenu index="1">
				    <template slot="title">
				      <i class="el-icon-menu"></i>
				      <span slot="title">综合管理</span>
				    </template>
				    <el-submenu index="1-1">
				      <span slot="title">电影管理</span>
				      <el-menu-item index="1-1-1" id="film" @click="handleTabsEdit($event,'add')">电影总览</el-menu-item>
				    </el-submenu>
				    <el-submenu index="1-2">
				      <span slot="title">书籍管理</span>
				      <el-menu-item index="1-2-1" id="book" @click="handleTabsEdit($event,'add')">书籍总览</el-menu-item>
				    </el-submenu>
				    <el-submenu index="1-3">
				      <span slot="title">作品管理</span>
				      <el-menu-item index="1-3-1" id="resouse" @click="handleTabsEdit($event,'add')">作品总览</el-menu-item>
				    </el-submenu>
				    <el-submenu index="1-4">
				      <span slot="title">生活管理</span>
				      <el-menu-item index="1-4-1" id="life" @click="handleTabsEdit($event,'add')">生活总览</el-menu-item>
				    </el-submenu>
				    <el-submenu index="1-5">
				      <span slot="title">用户管理</span>
				      <el-menu-item index="1-5-1" id="user" @click="handleTabsEdit($event,'add')">用户总览</el-menu-item>
				      <el-menu-item index="1-5-2" id="rule" @click="handleTabsEdit($event,'add')">权限设置</el-menu-item>
				    </el-submenu>
				  </el-submenu>
				  <el-submenu index="2">
				    <template slot="title">
				      <i class="el-icon-setting"></i>
				      <span slot="title">系统属性</span>
				    </template>
				    <el-submenu index="2-1">
				      <span slot="title">电影属性</span>
				      <el-menu-item index="2-1-1" id="filmType" @click="handleTabsEdit($event,'add')">电影类型</el-menu-item>
				    </el-submenu>
				    <el-submenu index="2-2">
				      <span slot="title">书籍属性</span>
				      <el-menu-item index="2-2-1" id="bookType" @click="handleTabsEdit($event,'add')">书籍类型</el-menu-item>
				    </el-submenu>
				    <el-submenu index="2-3">
				      <span slot="title">作品属性</span>
				      <el-menu-item index="2-3-1" id="resouseType" @click="handleTabsEdit($event,'add')">作品类型</el-menu-item>
				      <el-menu-item index="2-3-2" id="webLanguage" @click="handleTabsEdit($event,'add')">前端语言</el-menu-item>
				      <el-menu-item index="2-3-3" id="backLanguage" @click="handleTabsEdit($event,'add')">后端语言</el-menu-item>
				      <el-menu-item index="2-3-4" id="sqlLanguage" @click="handleTabsEdit($event,'add')">数据库</el-menu-item>
				    </el-submenu>
				    <el-submenu index="2-4">
				      <span slot="title">生活属性</span>
				      <el-menu-item index="2-4-1" id="bookType" @click="handleTabsEdit($event,'add')">生活类型</el-menu-item>
				    </el-submenu>
				    <el-submenu index="2-5">
				      <span slot="title">综合属性</span>
				      <el-menu-item index="2-5-1" id="country" @click="handleTabsEdit($event,'add')">国家</el-menu-item>
				      <el-menu-item index="2-5-2" id="language" @click="handleTabsEdit($event,'add')">语言</el-menu-item>
				    </el-submenu>
				  </el-submenu>
				</el-menu>
  		</aside>
  		</el-scrollbar>
  		<section class="el-container is-vertical">
  			<main class="el-main" style="padding: 0px;">
  				<el-tabs v-model="editableTabsValue" type="card" closable  @edit="handleTabsEdit">
					  <el-tab-pane
					    :key="item.name"
					    v-for="(item, index) in editableTabs"
					    :label="item.title"
					    :name="item.name"
					  >
					 	 	<component :name="item.title" :dataJson="item.data" :is="item.content"></component>
					  </el-tab-pane>
					</el-tabs>
  			</main>
  			<!--<footer class="el-footer" style="height: 60px; background: #333744;">
  				Footer
  			</footer>-->
  		</section>
  	</section>
  </section>
</template>

<script>
	import Welcome from './Welcome'
	import Film from './Film'
	import Book from './Book'
	import Resouse from './Resouse'
	import Life from './Life'
	import FilmType from './FilmType'
	import Country from './Country'
	import Language from './Language'
	import BookType from './BookType'
	import ResouseType from './ResouseType'
	import WebLanguage from './WebLanguage'
	import BackLanguage from './BackLanguage'
	import SqlLanguage from './SqlLanguage'
	import User from './User'
	import Rule from './Rule'
	
 	export default {
    data() {
      return {
        editableTabsValue: '1',
        editableTabs: [ {
          title: '首頁',
          name: '1',
          content : "welcome",
       		isCollapse: true
        }],
        tabIndex:1,
        userName : "",
        isCollapse: false,
        labelShowChange:false,
        labelHideChange:true
      }
    },
    components : {
    	"welcome" : Welcome,
    	"film" : Film,
    	"book" : Book,
    	"life" : Life,
    	"resouse" : Resouse,
    	"filmType" : FilmType,
    	"country" : Country,
    	"language" : Language,
    	"bookType" : BookType,
    	"resouseType" : ResouseType,
    	"webLanguage" : WebLanguage,
    	"backLanguage" : BackLanguage,
    	"sqlLanguage" : SqlLanguage,
    	"user" : User,
    	"rule" : Rule,
		},
		mounted ($route) {
	 		this.$nextTick(()=>{
	 			var _this = this;
	 			_this.$axios({
  				method:"post",
  				url:"http://www.qixiaocheng.cn/public/index.php/index/User/loginFlag",
  			}).then(function(result){
  				if(result.data.name){
  					_this.userName = result.data.name;
  				}
  				else{
  					_this.$router.push({name: 'login'});
  				}
  			});
	 		})
	 	},
    methods: {
    	changeLable: function(){
    		this.labelShowChange = !this.labelShowChange;
    		this.labelHideChange = !this.labelHideChange;
    		this.isCollapse = !this.isCollapse;
    	},
    	handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      },
    	loginOut:function(){
    		var _this = this;
	 			_this.$axios({
  				method:"post",
  				url:"http://www.qixiaocheng.cn/public/index.php/index/User/userLoginout",
  			}).then(function(result){
  				_this.$router.push({name: 'login'});
  			});
    	},
      handleTabsEdit(targetName, action) {
      	let data;
        if (action === 'add') {
        	switch (targetName.$el.id){
        		case "film":
        			data = this.film;
        			break;
    				case "book":
    					data = this.book;
    					break;
    				case "resouse":
    					data = this.resouse;
    					break;
						case "life":
    					data = this.life;
						break;
						case "filmType":
    					data = this.filmType;
						break;
						case "country":
    					data = this.country;
						break;
						case "language":
    					data = this.language;
						break;
						case "bookType":
    					data = this.bookType;
						break;
						case "resouseType":
    					data = this.resouseType;
						break;
						case "webLanguage":
    					data = this.webLanguage;
						break;
						case "backLanguage":
    					data = this.backLanguage;
						break;
						case "sqlLanguage":
    					data = this.sqlLanguage;
						break;
						case "user":
    					data = this.user;
						break;
        	}
        	let flag = true;
        	for(let i = 0; i<this.editableTabs.length; i++){
        		if(this.editableTabs[i].name == targetName.$el.id){
        			flag = false;
        		}
        	}
        	if(flag){
        		this.editableTabs.push({
	            title: targetName.$el.innerText,
	            name: targetName.$el.id,
	            content: targetName.$el.id,
	            data: data
	          });
	          if(this.editableTabs.length>10){
	          	 this.$alert('窗口大於10個了，建議關閉幾個哦！', '提示', {
			          confirmButtonText: '确定',
			          callback: action => {
			            this.$message({
			              type: 'info',
			              message: `action: ${ action }`
			            });
			          }
			        })
	          }
        	}
	          
          this.editableTabsValue = targetName.$el.id;
        }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
          
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.changeLable{
		width: 64px;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .changeHideLable{
  	width: 200px;
  }
</style>
